<template>
  <div class="app-container">
    <div class="queryform">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名:" prop="userCode">
          <el-input v-model="form.userCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="主机名:" prop="host">
          <el-input v-model="form.host" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="路径:" prop="path">
          <el-input v-model="form.path" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="审批状态:" prop="approvalResult">
          <el-select v-model="form.approvalResult" placeholder="请选择">
            <el-option
              v-for="item in results"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="触发时间起:" prop="startTimeStr">
          <el-date-picker
            v-model="form.startTimeStr"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择起始日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="触发时间止:" prop="endTimeStr">
          <el-date-picker
            v-model="form.endTimeStr"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择截止日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refresh">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mod-result-table">
      <HTable
        ref="table"
        :tableData="tableData"
        :columnConfigs="columnConfigs"
        @selection-change="handleSelectionChange"
        :selectable="false"
        orderable
        v-loading="loading"
        :pages="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      >
        <template slot-scope="{ row: { name, row, col } }">
          <template v-if="name == 'areaid'">
            {{ row.area.areaname }}
          </template>
          <template v-else-if="name == 'approvalResult'">
            <el-tag
              v-if="$getTagType(row.approvalResult, col.tagTypeObj)"
              :type="$getTagType(row.approvalResult, col.tagTypeObj)"
              >{{ $getTagType(row.approvalResult, col.labelObj) }}</el-tag
            >
          </template>
          <template v-else-if="name == 'action'">
            <el-button
              v-show="row.approvalResult == 0"
              type="text"
              size="small"
              @click="updateStatusDialog($event, row)"
              >申请</el-button
            >
            <el-button
              v-show="row.approvalResult == 0"
              type="text"
              size="small"
              @click="rejectHandle(row)"
              >放弃</el-button
            >
            <el-button
              v-show="row.approvalResult != 0"
              type="text"
              size="small"
              disabled
              >已审批</el-button
            >
          </template>
        </template>
      </HTable>
    </div>
    <div class="auditForm">
      <el-dialog
        title="申请"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :close-on-click-modal="false"
        width="45%"
      >
        <el-form
          ref="auditForm"
          :model="auditForm"
          :rules="rules"
          label-width="110px"
        >
          <el-form-item label="授权方式:" prop="authorizeType">
            <el-select
              v-model="auditForm.authorizeType"
              placeholder="请选择授权方式"
            >
              <el-option
                v-for="item in methodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="协同操作人:" prop="approvalUserCode">
            <el-select
              v-model="auditForm.approvalUserCode"
              placeholder="请选择协同操作人"
            >
              <el-option
                v-for="item in persons"
                :key="item.userId"
                :label="item.userCode"
                :value="item.userCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="4A主账号密码:" prop="approvalUserCodePw">
            <common-pwd-input
              placeholder="请输入4A主账号密码"
              :maxlength="36"
              style="width: 100%"
              v-model="auditForm.approvalUserCodePw"
            ></common-pwd-input>
            <!-- <el-input v-model="auditForm.approvalReason" maxlength="8" placeholder="请输入审批人密码"></el-input> -->
          </el-form-item>
          <el-form-item label="申请理由:" prop="applyReasonType">
            <el-select
              v-model="auditForm.applyReasonType"
              placeholder="请选择申请理由"
            >
              <el-option
                v-for="item in reasonList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="授权工单:" prop="authorizeOrder">
            <el-input
              v-model="auditForm.authorizeOrder"
              maxlength="32"
              placeholder="请输入授权工单"
            ></el-input>
          </el-form-item>
          <el-form-item label="详细理由:" prop="approvalUserCodeReason">
            <el-input
              type="textarea"
              v-model="auditForm.approvalUserCodeReason"
              maxlength="256"
              placeholder="请输入详细理由"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="submitaddForm('2')">驳 回</el-button> -->
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            type="primary"
            :disabled="onceflag"
            @click="submitaddForm('1')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { getList, updateStatus } from "@/api/yybl/jinkulist";
import { mapActions, mapState } from "vuex";
export default {
  components: {},
  mixins: [table],
  props: {},
  data() {
    return {
      form: {
        userCode: "",
        host: "",
        path: "",
        approvalResult: "",
        startTimeStr: "",
        endTimeStr: "",
      },
      results: [
        {
          label: "待申请",
          value: "0",
        },
        {
          label: "审批通过",
          value: "1",
        },
        {
          label: "已放弃",
          value: "2",
        },
      ],
      columnConfigs,
      dialogVisible: false,
      auditForm: {
        approvalUserCode: "",
        approvalReason: "",
        approvalUserCodePw: "",
        authorizeType: "",
        applyReasonType: "",
        authorizeOrder: "",
      },
      rules: {
        approvalUserCode: [
          { required: true, message: "请选择审批人", trigger: "change" },
        ],
        approvalReason: [
          { required: true, message: "请输入审批理由", trigger: "blur" },
        ],
        approvalUserCodePw: [
          { required: true, message: "请输入审批人密码", trigger: "blur" },
        ],
        authorizeType: [
          { required: true, message: "请选择授权方式", trigger: "change" },
        ],
        applyReasonType: [
          { required: true, message: "请选择申请理由", trigger: "change" },
        ],
      },
      methodList: [
        {
          label: "现场授权",
          value: "1",
        },
        {
          label: "远程授权",
          value: "2",
        },
      ],
      reasonList: [
        {
          label: "客户投诉",
          value: "1",
        },
        {
          label: "系统集成",
          value: "2",
        },
        {
          label: "故障处理",
          value: "3",
        },
        {
          label: "业务受理",
          value: "4",
        },
        {
          label: "业务测试",
          value: "5",
        },
      ],
      curRow: {},
      onceflag: false,
    };
  },
  watch: {},
  computed: {
    ...mapState("common", ["persons"]),
  },
  methods: {
    ...mapActions("common", ["getPersondatas"]),
    handleSelectionChange() {},
    handleClose() {
      this.dialogVisible = false;
    },
    submitaddForm(approvalResult) {
      this.$refs["auditForm"].validate((val) => {
        if (val) {
          const {
            approvalUserCode,
            approvalUserCodeReason,
            approvalUserCodePw,
            authorizeType,
            applyReasonType,
            authorizeOrder,
          } = this.auditForm;
          let params = {
            approvalId: this.curRow.approvalId,
            approvalUserCode,
            approvalUserCodeReason,
            approvalUserCodePw,
            authorizeType,
            applyReasonType,
            authorizeOrder,
            approvalResult,
          };
          this.onceflag = true;
          updateStatus(params)
            .then((res) => {
              if (res.rescode == 200) {
                this.dialogVisible = false;
                this.$message.success(res.msg);
                this.refresh();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            })
            .finally(() => {
              this.onceflag = false;
            });
        } else {
          console.log("校验失败");
        }
      });
    },
    rejectHandle(row) {
      this.$confirm("此操作将审批放弃该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          approvalId: row.approvalId,
          approvalResult: 2,
        };
        updateStatus(params)
          .then((res) => {
            if (res.rescode == 200) {
              this.$message.success(res.msg);
              this.refresh();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    updateStatusDialog(val, row) {
      console.log(val, row);
      this.curRow = row;
      this.auditForm = {
        approvalUserCode: "",
        approvalReason: "",
        approvalUserCodePw: "",
        authorizeType: "",
        applyReasonType: "",
        authorizeOrder: "",
      };
      this.$nextTick(() => {
        this.dialogVisible = true;
        this.$refs?.auditForm?.clearValidate();
      });
      // this.$refs['auditForm'] && this.$refs['auditForm'].clearValidate()
    },
    getparams() {
      const { userCode, host, path, approvalResult, startTimeStr, endTimeStr } =
        this.form;
      let params = {
        userCode,
        host,
        path,
        approvalResult,
        startTimeStr,
        endTimeStr,
      };
      return params;
    },
    refresh() {
      this.getlists(getList, this.getparams());
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.refresh();
    },
    updateStatus(row, status) {
      const msg =
        status == "1"
          ? "此操作将审批通过该数据, 是否继续?"
          : "此操作将审批驳回该数据, 是否继续?";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          approvalId: row.approvalId,
          token: row.token,
          approvalResult: status,
          notifyUrl: row.notifyUrl,
        };
        updateStatus(params)
          .then((res) => {
            console.log(res);
            if (res.rescode == "200") {
              this.$message.success(res.msg);
              this.refresh();
            } else this.$message.error(res.msg);
          })
          .catch((err) => {
            console.log(error);
          });
      });
    },
  },
  created() {
    this.getPersondatas();
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-button {
  .el-icon-circle-check + span {
    margin-left: 0px;
  }

  .el-icon-circle-close + span {
    margin-left: 0px;
  }
}

::v-deep .el-dialog {
  min-width: 500px;
  max-width: 568px;

  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}
.queryform {
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      max-width: 25%;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 25%;
      .el-form-item__content {
        .el-date-editor.el-input {
          width: 100%;
        }
      }
    }
  }
}
</style>
